<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  getConfig,
  updateConfig,
  uploadFloorGuideImage,
  uploadVideo,
  resetConfig,
} from "@/api/config";
import type {
  SystemConfig,
  UpdateConfigRequest,
  VideoResource,
} from "@/types/config";

interface ConfigItem {
  key: string;
  label: string;
  value: string;
  placeholder: string;
  type?: "text" | "textarea";
  rows?: number;
}

// 配置项列表
const configItems = ref<ConfigItem[]>([
  {
    key: "avatarPrompt",
    label: "数字人提示词配置",
    value: "",
    placeholder: "请输入数字人提示词",
    type: "textarea",
    rows: 4,
  },
  {
    key: "internalKnowledgeId",
    label: "内部知识库ID",
    value: "",
    placeholder: "请输入内部知识库ID",
    type: "text",
  },
  {
    key: "internalKnowledgeApiKey",
    label: "内部知识库API密钥",
    value: "",
    placeholder: "请输入内部知识库API密钥",
    type: "text",
  },
  {
    key: "externalKnowledgeId",
    label: "外部知识库ID",
    value: "",
    placeholder: "请输入外部知识库ID",
    type: "text",
  },
  {
    key: "externalKnowledgeApiKey",
    label: "外部知识库API密钥",
    value: "",
    placeholder: "请输入外部知识库API密钥",
    type: "text",
  },
  {
    key: "aiModelApiUrl",
    label: "AI模型API地址",
    value: "",
    placeholder: "请输入AI模型API地址",
    type: "text",
  },
  {
    key: "aiModelName",
    label: "AI模型名称",
    value: "",
    placeholder: "请输入AI模型名称",
    type: "text",
  },
  {
    key: "aiModelApiKey",
    label: "AI模型API密钥",
    value: "",
    placeholder: "请输入AI模型API密钥",
    type: "text",
  },
  {
    key: "voiceConfig",
    label: "音色配置",
    value: "",
    placeholder: "请输入音色配置",
    type: "text",
  },
]);

// 楼层导览图片
const floorGuideImage = ref("");
const floorGuideImagePreview = ref("");

// 视频资源列表
const videoResources = ref<VideoResource[]>([]);

// 当前编辑的视频
const editingVideo = ref<VideoResource | null>(null);
const showVideoDialog = ref(false);
const videoForm = ref({
  name: "",
  url: "",
  keywords: [] as string[],
  newKeyword: "",
});

// 是否正在保存
const isSaving = ref(false);

// 是否正在加载
const isLoading = ref(false);

// 配置ID（用于更新）
const configId = ref<number | null>(null);

// 加载配置
const loadConfig = async () => {
  isLoading.value = true;
  try {
    const config = await getConfig();
    configId.value = config.id;

    // 映射配置到表单
    const keyMap: Record<string, string> = {
      avatar_prompt: "avatarPrompt",
      internal_knowledge_id: "internalKnowledgeId",
      internal_knowledge_api_key: "internalKnowledgeApiKey",
      external_knowledge_id: "externalKnowledgeId",
      external_knowledge_api_key: "externalKnowledgeApiKey",
      ai_model_api_url: "aiModelApiUrl",
      ai_model_name: "aiModelName",
      ai_model_api_key: "aiModelApiKey",
      voice_config: "voiceConfig",
    };

    configItems.value.forEach((item) => {
      const apiKey = Object.keys(keyMap).find(
        (k) => keyMap[k] === item.key
      ) as keyof SystemConfig;
      if (apiKey && config[apiKey] !== undefined) {
        item.value = String(config[apiKey]);
      }
    });

    // 加载楼层导览图片
    if (config.floor_guide_image) {
      floorGuideImage.value = config.floor_guide_image;
      floorGuideImagePreview.value = config.floor_guide_image;
    }

    // 加载视频资源
    if (config.video_resources) {
      videoResources.value = config.video_resources;
    }
  } catch (error: any) {
    console.error("加载配置失败:", error);
    ElMessage.error(error || "加载配置失败");
  } finally {
    isLoading.value = false;
  }
};

// 处理楼层导览图片上传
const handleFloorImageUpload = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  if (file) {
    // 验证文件类型
    if (!file.type.startsWith("image/")) {
      ElMessage.error("请上传图片文件");
      return;
    }

    // 验证文件大小 (最大5MB)
    if (file.size > 5 * 1024 * 1024) {
      ElMessage.error("图片大小不能超过5MB");
      return;
    }

    try {
      isLoading.value = true;
      const response = await uploadFloorGuideImage(file);
      floorGuideImage.value = response.url;
      floorGuideImagePreview.value = response.url;

      // 显示成功消息
      ElMessage.success("图片上传成功");
    } catch (error: any) {
      console.error("上传图片失败:", error);
      ElMessage.error(error || "上传图片失败");
    } finally {
      isLoading.value = false;
      // 清除input值，允许重新上传相同文件
      target.value = "";
    }
  }
};

// 删除楼层导览图片
const removeFloorImage = () => {
  floorGuideImage.value = "";
  floorGuideImagePreview.value = "";
};

// 打开添加视频对话框
const openAddVideoDialog = () => {
  editingVideo.value = null;
  videoForm.value = {
    name: "",
    url: "",
    keywords: [],
    newKeyword: "",
  };
  showVideoDialog.value = true;
};

// 打开编辑视频对话框
const openEditVideoDialog = (video: VideoResource) => {
  editingVideo.value = video;
  videoForm.value = {
    name: video.name,
    url: video.url,
    keywords: [...video.keywords],
    newKeyword: "",
  };
  showVideoDialog.value = true;
};

// 关闭视频对话框
const closeVideoDialog = () => {
  showVideoDialog.value = false;
  editingVideo.value = null;
};

// 处理视频文件上传
const handleVideoUpload = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  if (file) {
    // 验证文件类型
    if (!file.type.startsWith("video/")) {
      ElMessage.error("请上传视频文件");
      return;
    }

    // 验证文件大小 (最大100MB)
    if (file.size > 100 * 1024 * 1024) {
      ElMessage.error("视频大小不能超过100MB");
      return;
    }

    try {
      isLoading.value = true;
      const response = await uploadVideo(file);
      videoForm.value.url = response.url;
      if (!videoForm.value.name) {
        videoForm.value.name = file.name;
      }
    } catch (error: any) {
      console.error("上传视频失败:", error);
      ElMessage.error(error || "上传视频失败");
    } finally {
      isLoading.value = false;
      // 清除input值，允许重新上传相同文件
      target.value = "";
    }
  }
};

// 添加关键词
const addKeyword = () => {
  const keyword = videoForm.value.newKeyword.trim();
  if (keyword && !videoForm.value.keywords.includes(keyword)) {
    videoForm.value.keywords.push(keyword);
    videoForm.value.newKeyword = "";
  }
};

// 删除关键词
const removeKeyword = (index: number) => {
  videoForm.value.keywords.splice(index, 1);
};

// 保存视频
const saveVideo = () => {
  if (!videoForm.value.name.trim()) {
    ElMessage.error("请输入视频名称");
    return;
  }

  if (!videoForm.value.url) {
    ElMessage.error("请上传视频文件");
    return;
  }

  if (editingVideo.value) {
    // 编辑现有视频
    const index = videoResources.value.findIndex(
      (v) => v.id === editingVideo.value!.id
    );
    if (index !== -1) {
      videoResources.value[index] = {
        ...editingVideo.value,
        name: videoForm.value.name,
        url: videoForm.value.url,
        keywords: videoForm.value.keywords,
      };
    }
  } else {
    // 添加新视频
    const newVideo: VideoResource = {
      id: Date.now().toString(),
      name: videoForm.value.name,
      url: videoForm.value.url,
      keywords: videoForm.value.keywords,
    };
    videoResources.value.push(newVideo);
  }

  closeVideoDialog();
};

// 删除视频
const deleteVideo = (id: string) => {
  ElMessageBox.confirm("确定要删除这个视频吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      videoResources.value = videoResources.value.filter((v) => v.id !== id);
    })
    .catch(() => {
      // 用户取消操作
    });
};

// 保存配置
const saveConfig = async () => {
  isSaving.value = true;

  try {
    // 构建更新请求数据
    const updateData: UpdateConfigRequest = {
      avatar_prompt: configItems.value[0].value,
      internal_knowledge_id: configItems.value[1].value,
      internal_knowledge_api_key: configItems.value[2].value,
      external_knowledge_id: configItems.value[3].value,
      external_knowledge_api_key: configItems.value[4].value,
      ai_model_api_url: configItems.value[5].value,
      ai_model_name: configItems.value[6].value,
      ai_model_api_key: configItems.value[7].value,
      voice_config: configItems.value[8].value,
      floor_guide_image: floorGuideImage.value,
      video_resources: videoResources.value,
    };

    await updateConfig(updateData);

    ElMessage.success("配置保存成功");
  } catch (error: any) {
    console.error("保存配置失败:", error);
    ElMessage.error(error || "保存配置失败");
  } finally {
    isSaving.value = false;
  }
};
import { ElMessageBox } from "element-plus";
// 重置配置
const handleResetConfig = async () => {
  ElMessageBox.confirm("确定要重置所有配置吗?这将清空所有配置项。", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    try {
      isLoading.value = true;
      await resetConfig();

      // 清空表单
      configItems.value.forEach((item) => {
        item.value = "";
      });

      // 清空楼层导览图片
      floorGuideImage.value = "";
      floorGuideImagePreview.value = "";

      // 清空视频资源
      videoResources.value = [];

      ElMessage.success("配置重置成功");

      // 重新加载配置
      await loadConfig();
    } catch (error: any) {
      console.error("重置配置失败:", error);
      ElMessage.error(error || "重置配置失败");
    } finally {
      isLoading.value = false;
    }
  });
};

// 组件挂载时加载配置
onMounted(() => {
  loadConfig();
});
</script>

<template>
  <div class="config-container">
    <div class="config-header">
      <h1>配置管理</h1>
      <div class="header-actions">
        <button
          class="reset-btn"
          @click="handleResetConfig"
          :disabled="isLoading || isSaving"
        >
          重置配置
        </button>
        <button
          class="save-btn"
          @click="saveConfig"
          :disabled="isLoading || isSaving"
        >
          {{ isSaving ? "保存中..." : "保存配置" }}
        </button>
      </div>
    </div>

    <div class="config-content">
      <div class="config-form">
        <!-- 楼层导览配置 -->
        <div class="config-section">
          <h2 class="section-title">楼层导览配置</h2>
          <div class="form-group">
            <label>楼层导览配置图片</label>
            <div class="upload-area">
              <input
                type="file"
                accept="image/*"
                @change="handleFloorImageUpload"
                style="display: none"
                id="floorImageInput"
              />
              <label for="floorImageInput" class="upload-button">
                选择图片
              </label>
              <span class="upload-tip">支持 JPG、PNG、GIF，最大5MB</span>
            </div>
            <div v-if="floorGuideImagePreview" class="image-preview">
              <img :src="floorGuideImagePreview" alt="楼层导览图片" />
              <button class="remove-image-btn" @click="removeFloorImage">
                删除
              </button>
            </div>
          </div>
        </div>

        <!-- 数字人配置 -->
        <div class="config-section">
          <h2 class="section-title">数字人配置</h2>
          <div class="form-group">
            <label>{{ configItems[0].label }}</label>
            <textarea
              v-model="configItems[0].value"
              :placeholder="configItems[0].placeholder"
              :rows="configItems[0].rows"
            ></textarea>
          </div>
        </div>

        <!-- 内部知识库配置 -->
        <div class="config-section">
          <h2 class="section-title">内部知识库配置</h2>
          <div class="form-group">
            <label>{{ configItems[1].label }}</label>
            <input
              v-model="configItems[1].value"
              type="text"
              :placeholder="configItems[1].placeholder"
            />
          </div>
          <div class="form-group">
            <label>{{ configItems[2].label }}</label>
            <input
              v-model="configItems[2].value"
              type="password"
              :placeholder="configItems[2].placeholder"
            />
          </div>
        </div>

        <!-- 外部知识库配置 -->
        <div class="config-section">
          <h2 class="section-title">外部知识库配置</h2>
          <div class="form-group">
            <label>{{ configItems[3].label }}</label>
            <input
              v-model="configItems[3].value"
              type="text"
              :placeholder="configItems[3].placeholder"
            />
          </div>
          <div class="form-group">
            <label>{{ configItems[4].label }}</label>
            <input
              v-model="configItems[4].value"
              type="password"
              :placeholder="configItems[4].placeholder"
            />
          </div>
        </div>

        <!-- AI模型配置 -->
        <div class="config-section">
          <h2 class="section-title">AI模型配置</h2>
          <div class="form-group">
            <label>{{ configItems[5].label }}</label>
            <input
              v-model="configItems[5].value"
              type="text"
              :placeholder="configItems[5].placeholder"
            />
          </div>
          <div class="form-group">
            <label>{{ configItems[6].label }}</label>
            <input
              v-model="configItems[6].value"
              type="text"
              :placeholder="configItems[6].placeholder"
            />
          </div>
          <div class="form-group">
            <label>{{ configItems[7].label }}</label>
            <input
              v-model="configItems[7].value"
              type="text"
              :placeholder="configItems[7].placeholder"
            />
          </div>
        </div>

        <!-- 视频资源配置 -->
        <div class="config-section">
          <h2 class="section-title">视频资源配置</h2>
          <div class="video-list-header">
            <button class="add-video-btn" @click="openAddVideoDialog">
              添加视频
            </button>
          </div>
          <div class="video-list">
            <div
              v-for="video in videoResources"
              :key="video.id"
              class="video-item"
            >
              <div class="video-info">
                <div class="video-name">{{ video.name }}</div>
                <div class="video-keywords">
                  <span
                    v-for="(keyword, index) in video.keywords"
                    :key="index"
                    class="keyword-tag"
                  >
                    {{ keyword }}
                  </span>
                  <span v-if="video.keywords.length === 0" class="no-keywords">
                    暂无关键词
                  </span>
                </div>
              </div>
              <div class="video-actions">
                <button class="edit-btn" @click="openEditVideoDialog(video)">
                  编辑
                </button>
                <button class="delete-btn" @click="deleteVideo(video.id)">
                  删除
                </button>
              </div>
            </div>
            <div v-if="videoResources.length === 0" class="empty-videos">
              暂无视频资源，点击"添加视频"按钮上传视频
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频编辑对话框 -->
    <div
      v-if="showVideoDialog"
      class="dialog-overlay"
      @click="closeVideoDialog"
    >
      <div class="dialog video-dialog" @click.stop>
        <div class="dialog-header">
          <h2>{{ editingVideo ? "编辑视频" : "添加视频" }}</h2>
          <button class="close-btn" @click="closeVideoDialog">×</button>
        </div>
        <div class="dialog-body">
          <div class="form-group">
            <label>视频名称</label>
            <input
              v-model="videoForm.name"
              type="text"
              placeholder="请输入视频名称"
            />
          </div>
          <div class="form-group">
            <label>视频文件</label>
            <div class="upload-area">
              <input
                type="file"
                accept="video/*"
                @change="handleVideoUpload"
                style="display: none"
                id="videoFileInput"
              />
              <label for="videoFileInput" class="upload-button">
                {{ videoForm.url ? "重新选择" : "选择视频" }}
              </label>
              <span class="upload-tip">支持 MP4、AVI、MOV，最大100MB</span>
            </div>
            <div v-if="videoForm.url" class="video-preview">
              <video :src="videoForm.url" controls></video>
            </div>
          </div>
          <div class="form-group">
            <label>关键词</label>
            <div class="keyword-input-area">
              <input
                v-model="videoForm.newKeyword"
                type="text"
                placeholder="输入关键词后按回车或点击添加"
                @keyup.enter="addKeyword"
              />
              <button class="add-keyword-btn" @click="addKeyword">添加</button>
            </div>
            <div class="keywords-display">
              <span
                v-for="(keyword, index) in videoForm.keywords"
                :key="index"
                class="keyword-tag editable"
              >
                {{ keyword }}
                <button class="remove-keyword" @click="removeKeyword(index)">
                  ×
                </button>
              </span>
              <span
                v-if="videoForm.keywords.length === 0"
                class="no-keywords-hint"
              >
                暂无关键词
              </span>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="cancel-btn" @click="closeVideoDialog">取消</button>
          <button class="confirm-btn" @click="saveVideo">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.config-container {
  height: 100%;
  background: transparent;
  position: relative;
}

.config-header {
  padding: 24px 32px;
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.08) 0%,
    rgba(49, 190, 255, 0.03) 100%
  );
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(49, 190, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;

  h1 {
    font-size: 28px;
    font-weight: 600;
    color: #f6f9fe;
    font-family: "YouSheBiaoTiHei", sans-serif;
    text-shadow: 0 2px 8px rgba(49, 190, 255, 0.3);
  }
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;

  button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Alibaba PuHuiTi", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  .reset-btn {
    background: rgba(49, 190, 255, 0.08);
    border: 1px solid rgba(49, 190, 255, 0.2);
    color: rgba(246, 249, 254, 0.7);

    &:hover:not(:disabled) {
      background: rgba(49, 190, 255, 0.15);
      border-color: rgba(49, 190, 255, 0.3);
      color: #f6f9fe;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(49, 190, 255, 0.2);
    }

    &:active:not(:disabled) {
      transform: translateY(0);
    }
  }

  .save-btn {
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.3) 0%,
      rgba(49, 190, 255, 0.2) 100%
    );
    border: 1px solid rgba(49, 190, 255, 0.4);
    color: #31beff;
    box-shadow: 0 2px 8px rgba(49, 190, 255, 0.2);

    &:hover:not(:disabled) {
      background: linear-gradient(
        135deg,
        rgba(49, 190, 255, 0.4) 0%,
        rgba(49, 190, 255, 0.3) 100%
      );
      border-color: rgba(49, 190, 255, 0.6);
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(49, 190, 255, 0.3);
    }

    &:active:not(:disabled) {
      transform: translateY(0);
    }
  }
}

.config-content {
  height: 800px;
  overflow: auto;
  padding: 24px 32px;

  /* 优化滚动条样式 */
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(26, 31, 58, 0.3);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: linear-gradient(
      180deg,
      rgba(49, 190, 255, 0.4) 0%,
      rgba(49, 190, 255, 0.6) 100%
    );
    border-radius: 4px;
    transition: all 0.3s ease;

    &:hover {
      background: linear-gradient(
        180deg,
        rgba(49, 190, 255, 0.6) 0%,
        rgba(49, 190, 255, 0.8) 100%
      );
    }
  }
}

.config-form {
  max-width: 1000px;
  margin: 0 auto;
}

.config-section {
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.05) 0%,
    rgba(49, 190, 255, 0.02) 100%
  );
  backdrop-filter: blur(20px);
  border: 1px solid rgba(49, 190, 255, 0.15);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;

  &:hover {
    border-color: rgba(49, 190, 255, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(49, 190, 255, 0.9);
  font-family: "YouSheBiaoTiHei", sans-serif;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(49, 190, 255, 0.2);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.form-group {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }

  label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(246, 249, 254, 0.85);
    font-family: "Alibaba PuHuiTi", sans-serif;
  }

  input,
  textarea {
    width: 100%;
    padding: 10px 16px;
    background: rgba(26, 31, 58, 0.6);
    border: 1px solid rgba(49, 190, 255, 0.3);
    border-radius: 8px;
    font-size: 14px;
    color: #f6f9fe;
    font-family: "Alibaba PuHuiTi", sans-serif;
    transition: all 0.3s ease;
    resize: vertical;

    &::placeholder {
      color: rgba(246, 249, 254, 0.4);
    }

    &:focus {
      border-color: rgba(49, 190, 255, 0.6);
      outline: none;
      background: rgba(26, 31, 58, 0.8);
      box-shadow: 0 0 0 3px rgba(49, 190, 255, 0.15),
        0 4px 12px rgba(49, 190, 255, 0.2);
    }
  }

  textarea {
    min-height: 100px;
    line-height: 1.6;
  }
}

.upload-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.upload-button {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.2) 0%,
    rgba(49, 190, 255, 0.1) 100%
  );
  border: 1px solid rgba(49, 190, 255, 0.3);
  border-radius: 8px;
  color: #31beff;
  font-size: 14px;
  font-weight: 500;
  font-family: "Alibaba PuHuiTi", sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.3) 0%,
      rgba(49, 190, 255, 0.2) 100%
    );
    border-color: rgba(49, 190, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(49, 190, 255, 0.3);
  }
}

.upload-tip {
  font-size: 13px;
  color: rgba(246, 249, 254, 0.5);
  font-family: "Alibaba PuHuiTi", sans-serif;
}

.image-preview {
  margin-top: 16px;
  position: relative;
  display: inline-block;

  img {
    max-width: 400px;
    max-height: 300px;
    border-radius: 8px;
    border: 1px solid rgba(49, 190, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .remove-image-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px 12px;
    background: rgba(220, 38, 38, 0.9);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    font-family: "Alibaba PuHuiTi", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(220, 38, 38, 1);
      transform: scale(1.05);
    }
  }
}

.video-list-header {
  margin-bottom: 16px;
}

.add-video-btn {
  padding: 10px 20px;
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.25) 0%,
    rgba(49, 190, 255, 0.15) 100%
  );
  border: 1px solid rgba(49, 190, 255, 0.4);
  border-radius: 8px;
  color: #31beff;
  font-size: 14px;
  font-weight: 500;
  font-family: "Alibaba PuHuiTi", sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(49, 190, 255, 0.2);

  &:hover {
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.35) 0%,
      rgba(49, 190, 255, 0.25) 100%
    );
    border-color: rgba(49, 190, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(49, 190, 255, 0.3);
  }

  &:active {
    transform: translateY(0);
  }
}

.video-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.video-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(26, 31, 58, 0.4);
  border: 1px solid rgba(49, 190, 255, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(26, 31, 58, 0.6);
    border-color: rgba(49, 190, 255, 0.4);
    box-shadow: 0 4px 12px rgba(49, 190, 255, 0.2);
  }
}

.video-info {
  flex: 1;
}

.video-name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(246, 249, 254, 0.9);
  font-family: "Alibaba PuHuiTi", sans-serif;
  margin-bottom: 8px;
}

.video-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.keyword-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(49, 190, 255, 0.15);
  border: 1px solid rgba(49, 190, 255, 0.3);
  border-radius: 4px;
  color: rgba(49, 190, 255, 0.9);
  font-size: 12px;
  font-family: "Alibaba PuHuiTi", sans-serif;

  &.editable {
    padding-right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}

.remove-keyword {
  background: none;
  border: none;
  color: rgba(49, 190, 255, 0.9);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &:hover {
    color: #ef4444;
    transform: scale(1.2);
  }
}

.no-keywords,
.no-keywords-hint {
  font-size: 13px;
  color: rgba(246, 249, 254, 0.4);
  font-family: "Alibaba PuHuiTi", sans-serif;
  font-style: italic;
}

.video-actions {
  display: flex;
  gap: 8px;

  button {
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    font-family: "Alibaba PuHuiTi", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .edit-btn {
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.2) 0%,
      rgba(49, 190, 255, 0.1) 100%
    );
    border: 1px solid rgba(49, 190, 255, 0.3);
    color: #31beff;

    &:hover {
      background: linear-gradient(
        135deg,
        rgba(49, 190, 255, 0.3) 0%,
        rgba(49, 190, 255, 0.2) 100%
      );
      border-color: rgba(49, 190, 255, 0.5);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(49, 190, 255, 0.3);
    }
  }

  .delete-btn {
    background: linear-gradient(
      135deg,
      rgba(220, 38, 38, 0.2) 0%,
      rgba(220, 38, 38, 0.1) 100%
    );
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #ef4444;

    &:hover {
      background: linear-gradient(
        135deg,
        rgba(220, 38, 38, 0.3) 0%,
        rgba(220, 38, 38, 0.2) 100%
      );
      border-color: rgba(220, 38, 38, 0.5);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    }
  }
}

.empty-videos {
  padding: 40px 20px;
  text-align: center;
  color: rgba(246, 249, 254, 0.5);
  font-size: 14px;
  font-family: "Alibaba PuHuiTi", sans-serif;
}

.keyword-input-area {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;

  input {
    flex: 1;
  }

  .add-keyword-btn {
    padding: 10px 20px;
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.2) 0%,
      rgba(49, 190, 255, 0.1) 100%
    );
    border: 1px solid rgba(49, 190, 255, 0.3);
    border-radius: 8px;
    color: #31beff;
    font-size: 14px;
    font-weight: 500;
    font-family: "Alibaba PuHuiTi", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;

    &:hover {
      background: linear-gradient(
        135deg,
        rgba(49, 190, 255, 0.3) 0%,
        rgba(49, 190, 255, 0.2) 100%
      );
      border-color: rgba(49, 190, 255, 0.5);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(49, 190, 255, 0.3);
    }
  }
}

.keywords-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: rgba(26, 31, 58, 0.4);
  border: 1px solid rgba(49, 190, 255, 0.2);
  border-radius: 8px;
  min-height: 50px;
}

.video-preview {
  margin-top: 12px;

  video {
    width: 100%;
    max-height: 300px;
    border-radius: 8px;
    border: 1px solid rgba(49, 190, 255, 0.3);
    background: black;
  }
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dialog {
  background: linear-gradient(
    135deg,
    rgba(26, 31, 58, 0.95) 0%,
    rgba(10, 14, 39, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  border: 1px solid rgba(49, 190, 255, 0.3);
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(49, 190, 255, 0.2);
  animation: slideUp 0.3s ease;

  &.video-dialog {
    max-width: 700px;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(49, 190, 255, 0.2);
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.08) 0%,
    rgba(49, 190, 255, 0.03) 100%
  );

  h2 {
    font-size: 20px;
    font-weight: 600;
    color: #f6f9fe;
    font-family: "YouSheBiaoTiHei", sans-serif;
    text-shadow: 0 2px 8px rgba(49, 190, 255, 0.3);
  }

  .close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(246, 249, 254, 0.6);
    font-size: 28px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(49, 190, 255, 0.1);
      border-color: rgba(49, 190, 255, 0.3);
      color: #31beff;
      transform: rotate(90deg);
    }
  }
}

.dialog-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;

  /* 优化对话框内滚动条 */
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(26, 31, 58, 0.3);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(49, 190, 255, 0.4);
    border-radius: 3px;

    &:hover {
      background: rgba(49, 190, 255, 0.6);
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid rgba(49, 190, 255, 0.2);
  background: linear-gradient(
    135deg,
    rgba(49, 190, 255, 0.03) 0%,
    rgba(49, 190, 255, 0.01) 100%
  );

  button {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Alibaba PuHuiTi", sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .cancel-btn {
    background: rgba(49, 190, 255, 0.08);
    border: 1px solid rgba(49, 190, 255, 0.2);
    color: rgba(246, 249, 254, 0.7);

    &:hover {
      background: rgba(49, 190, 255, 0.15);
      border-color: rgba(49, 190, 255, 0.3);
      color: #f6f9fe;
      transform: translateY(-2px);
    }
  }

  .confirm-btn {
    background: linear-gradient(
      135deg,
      rgba(49, 190, 255, 0.3) 0%,
      rgba(49, 190, 255, 0.2) 100%
    );
    border: 1px solid rgba(49, 190, 255, 0.4);
    color: #31beff;
    box-shadow: 0 2px 8px rgba(49, 190, 255, 0.2);

    &:hover {
      background: linear-gradient(
        135deg,
        rgba(49, 190, 255, 0.4) 0%,
        rgba(49, 190, 255, 0.3) 100%
      );
      border-color: rgba(49, 190, 255, 0.6);
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(49, 190, 255, 0.3);
    }

    &:active {
      transform: translateY(0);
    }
  }
}
</style>
